<template>
	<view>
		<view class="cenbox">
			<view class="itembox">
				<view class="topbox">
					<image :src="infodetails.avatar" style="width: 72rpx;height: 72rpx;border-radius: 50%;" mode="">
					</image>
					<view class="r-box">
						<view class="nametxt">
							{{infodetails.nickname}}
						</view>
						<view class="timetxt">
							{{infodetails.time}}发布
						</view>
					</view>
				</view>

				<view class="centerbox">
					<view class="dongtaitxt">
						{{infodetails.content}}
					</view>
					<view class="imgbox">
						<image :src="i" v-for="(i,k) in infodetails.images" :key="k"
							style="width: 220rpx;height: 220rpx;border-radius: 16rpx;margin-bottom: 16rpx;margin-right: 10rpx;"
							mode=""></image>
					</view>

				</view>

			</view>

		</view>

		<view class="pinglun">
			<view class="top-box">
				<view class="le-box">
					全部{{infodetails.comment}}条评论
				</view>
				<view class="ri-box">
					<view class="zan">
						{{infodetails.collection}} 赞
					</view>
					<view class="fenx">
						{{infodetails.give}}分享
					</view>
				</view>
			</view>
			<view class="itembox" v-for="(i,index) in pllist" :key="index">
				<view class="top-box">
					<image :src="i.avatar" style="width: 64rpx;height: 64rpx;border-radius: 50%;" mode=""></image>
					<view class="left-box">
						<view class="nametxt">
							{{i.nickname}}
						</view>
						<view class="richtxt">
							{{i.content}}
						</view>
					</view>
				</view>
				<view class="huifubox">
					回复
				</view>
				<view class="orderhuifubox" v-for="(ii,k) in i.children" :key="k">
					<view class="orderpop">
						{{ii.nickname}}:{{ii.content}}
					</view>
					<view class="chakan" v-if="i.children.length-1>0">
						查看全部{{i.children.length-1}}条回复
					</view>
				</view>
			</view>
		</view>
		<view class="bot-box">
			<view class="inpbox">
				<input type="text" v-model="comments" placeholder="我来讲两句~" @confirm="setComment"/>
			</view>
			<view class="r-box">
				<button class="btnfenxiang" open-type="share" plain="true" @click="showmodeo">
					<image src="/static/index/fenxiang.png" class="fenx" mode=""></image>
				</button>
				<image src="/static/index/dianzan.png" class="zan" mode="" @click="zan"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import ikz from '@/pages/Common/tools.js';
	export default {
		data( ) {
			return {
				id: 0,
				adminImgPath: getApp( ).globalData.adminImgPath,
				infodetails: '',
				comments:'',
				limit:10,
				page:1,
				pllist:[]
			};
		},
		onLoad( op ) {
			this.id = op.id
		},
		onShow( ) {
			this.page = 1
			this.init( )
			this.getcomlist() 
		},
		onShareAppMessage: function( res ) {
			let that = this;
			if ( res.from === 'button' ) {

			}
			if ( !this.infodetails ) {
				return {
					title: '校园跑腿小程序',
					path: 'pages/Home/dongtaidetails?id=' + that.id
				}
			}
			return {
				title: this.infodetails.content || '校园跑腿小程序',
				path: 'pages/Home/dongtaidetails?id=' + that.id,
				success: function( res ) {
					util.showToast( '分享成功' )
				}
			}
		},
		methods: {
			showmodeo( ) {
				uni.showModal( {
					title: '提示',
					content: '请点击右上角转发',
					success: function( res ) {
						if ( res.confirm ) {
							console.log( '用户点击确定' );
						} else if ( res.cancel ) {
							console.log( '用户点击取消' );
						}
					}
				} );
			},
			init( ) {
				var path = '/xyb/posts/posts/detail';
				var data = {
					id: this.id,
					token: uni.getStorageSync( 'local_user_session' ),
				};
				ikz.request( path, data, res => {
					console.log( res, 'rrrr' );
					if ( res.data.code == 1 ) {
						// this.list = res.data.data.data
						this.infodetails = res.data.data
					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} )
			},
			getcomlist(){
				let path = '/xyb/posts/posts/posts_details'
				let data = {
					id: this.id,
					token: uni.getStorageSync('local_user_session'),
					page: this.page,
					limit: this.limit,
					agent_id: uni.getStorageSync('default_agent').id||''
				}
				ikz.request(path, data, res => {
					console.log(res,'ssss');
					if (res.data.code == 1) {
						this.pllist = res.data.data.data
						console.log(this.pllist,'pllist');
					}
				})
			},
			// 发表评论
			setComment() {
				let path = '/xyb/posts/posts/comment'
				let data = {
					posts_id: this.id,
					token: uni.getStorageSync('local_user_session'),
					content: this.comments,
					agent_id: uni.getStorageSync('default_agent').id||''
				}
				ikz.requestPost(path, data, res => {
					console.log(res,'ssss');
					if (res.data.code == 1) {
						// this.getPostsDetail()
						// this.getDetail()
						this.getcomlist()
						this.comments = ''
					}
				})
			},
			zan( ) {
				var path = '/xyb/posts/posts/give';
				var data = {
					posts_id: this.id,
					token: uni.getStorageSync( 'local_user_session' ),
				};
				ikz.request( path, data, res => {
					console.log( res, 'rrrr' );
					if ( res.data.code == 1 ) {
						uni.showToast( {
							title: res.data.msg,
							icon: 'none'
						} )
						this.init( )

					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} )
			}
		},
	}
</script>

<style lang="scss">
	.cenbox {
		width: 100%;
		min-height: 500rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;

		.itembox {
			width: 100%;
			min-height: 371rpx;
			padding: 26rpx 0;
			box-sizing: border-box;
			border-bottom: 24rpx solid #F5F5F5;

			.topbox {
				width: 100%;
				height: 72rpx;
				display: flex;
				align-items: center;

				.r-box {
					width: 600rpx;
					height: 72rpx;
					margin-left: 8rpx;

					.nametxt {
						width: 100%;
						height: 38rpx;
						font-weight: 500;
						font-size: 26rpx;
						color: #222222;
						text-align: left;
					}

					.timetxt {
						width: 100%;
						height: 34rpx;
						font-weight: 300;
						font-size: 22rpx;
						color: #AFAFAF;
						text-align: left;
					}
				}
			}

			.centerbox {
				width: 100%;
				min-height: 220rpx;
				margin-top: 26rpx;
				box-sizing: border-box;

				.dongtaitxt {
					width: 100%;
					min-height: 38rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
					text-align: left;
					margin-bottom: 24rpx;
				}

				.imgbox {
					width: 100%;
					min-height: 220rpx;
					display: flex;
					flex-wrap: wrap;
				}
			}

		}
	}

	.pinglun {
		width: 750rpx;
		min-height: 365rpx;
		background: #FFFFFF;
		padding: 26rpx 30rpx;
		box-sizing: border-box;
		border-bottom: 18rpx solid #F5F5F5;

		.top-box {
			width: 100%;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.le-box {
				width: 50%;
				height: 40rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				text-align: left;
			}

			.ri-box {
				width: 30%;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.zan {
					width: 100rpx;
					height: 36rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					text-align: left;
				}

				.fenx {
					width: 100rpx;
					height: 36rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					text-align: right;
				}
			}
		}

		.itembox {
			width: 690rpx;
			min-height: 182rpx;
			margin-top: 24rpx;

			.top-box {
				width: 100%;
				min-height: 64rpx;

				.left-box {
					width: 618rpx;
					min-height: 64rpx;

					.nametxt {
						width: 100%;
						height: 36rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
						text-align: left;
					}

					.richtxt {
						width: 100%;
						min-height: 38rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #000000;
						text-align: left;
					}
				}
			}

			.huifubox {
				width: 48rpx;
				min-height: 36rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #247EFF;
				text-align: left;
				margin-top: 30rpx;
				margin-left: 72rpx;
			}

			.orderhuifubox {
				width: 618rpx;
				min-height: 67rpx;
				background: #F5F5F5;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-left: 72rpx;
				margin-top: 8rpx;
				padding: 16rpx;
				box-sizing: border-box;

				.orderpop {
					width: 100%;
					min-height: 36rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #AFAFAF;
					text-align: left;
				}

				.chakan {
					width: 182rpx;
					min-height: 18rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #247EFF;
					text-align: left;
				}
			}
		}
	}

	.bot-box {
		width: 750rpx;
		height: 176rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 40rpx 0 30rpx;
		box-sizing: border-box;
		display: flex;


		.inpbox {
			width: 520rpx;
			height: 88rpx;
			background: #F5F5F5;
			border-radius: 58rpx 58rpx 58rpx 58rpx;
			padding: 24rpx;
			box-sizing: border-box;
		}

		.r-box {
			width: 140rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			// flex-direction: column;
			justify-content: space-between;
			padding-left: 32rpx;
			box-sizing: border-box;

			.btnfenxiang {
				border-style: none;
				border: none;
				display: flex;
				background-color: #fff;
				padding: revert;

				.fenx {
					width: 48rpx;
					height: 48rpx;
				}
			}



			.zan {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
</style>